<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="layout" content="main"/>
<title>Compesense - Gestão de Desempenho</title>
<script type="text/javascript">
   $(document).ready(function () { 
      // Aplica o efeito de "carousel" nas divs que possuirem a classe carousel.
      $('.carousel-inner').carousel({
         interval: false
      });
 
      // Oculta o botão de navegação para a div 1.
      $('#div-1').hide();
 
      // Aplica a transição quando houver click no link AVANÇAR.
      $("#a-1").click(function () {
         $('#div-carousel').carousel(0);
         $('#div-1').hide();
         $('#div-2').show();
         return false;
      });
 
      // Aplica a transição quando houver click no link VOLTAR.
      $("#a-2").click(function () {
         $('#div-carousel').carousel(1);
         $('#div-1').show();
         $('#div-2').hide();
         return false;
      });
   });
</script>
</head>
<div class="contain-fluid">
	<div class="row-fluid">
		<div id="div-carousel" class="carousel slide">		
				<div id="div-1" class="span2">
		      		<a id="a-1" class="" href="#div-carousel" data-slide="prev"><i class="icon-chevron-left"></i></a>
		   		</div>		   		
				<div class="carousel-inner span8" style="margin: 0 auto">				
				      <!-- Divs com efeito de transição. -->
				      <div class="item active">
				         <img alt="Dolphin Sistemas" src="images/carrorel-dolphin.png">
				      </div>
				      <div class="item">
				         <img alt="Gestão de Desempenho" src="images/carrorel-gestao.png">
				      </div>	      
				      <div class="item">
				         <img alt="Gestão de Desempenho" src="images/carrorel-gestao-competencia.png">
				      </div>
				      <div class="item">
				         <img alt="Gestão de Desempenho" src="images/carrorel-compesense.png">
				      </div> 				      
				</div>				
				<div id="div-2" class="span2">
   					<a id="a-2" class=""  style="float:right" href="#div-carousel" data-slide="next"><i class="icon-chevron-right"></i></a>
   				</div>				
		</div>	
	</div>
</div>
</body>
</html>